<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德地图</title>
    <style>
        html, body, #container {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .mapInIt {
            text-align: center;
            width: 100%;
            height: 3rem;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            color: #bbbbbb;
        }

        .back {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            text-align: center;
            background-color: #ffffff;
            color: #000000;
            font-weight: bold;
            position: fixed;
            right: 2rem;
            bottom: 2rem;
            font-size: .9em;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            box-shadow: 0 0 10px 1px #000;
            cursor: pointer;
            opacity: .7;
        }

        .back span {
            display: block;
            margin-top: .5em;
            line-height: 1.2em;
        }

        /*去掉地图上高德的logo和版本号，虽然很不道德*/
        /*.amap-logo,*/
        /*.amap-copyright {*/
        /*opacity: 0;*/
        /*display: none;*/
        /*pointer-events: none;*/
        /*}*/
    </style>
</head>
<body>

<!--地图区域-->
<div id="container">
    <div class="mapInIt">地图加载中...</div>
</div>
<div class="back" onclick="backToCenter();"><span>复位<br>地图</span></div>

<script type="text/javascript"
        src="http://webapi.amap.com/maps?v=1.4.4&key=f15f46965262ec2284ab80b8cd91b3db&plugin=AMap.ControlBar&callback=mapInit"></script>
<script type="text/javascript">
    var map,
        pitch = 30,
        rotation = 0,
        zoomNumber = 19.2,
        centerPoint = [120.5838, 31.29759];
    window.mapInit = function () {
        map = new AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化，默认值为false
            rotateEnable: true, //是否允许设置地图顺时针旋转角度
            pitchEnable: true, //是否允许设置俯仰角度，3D视图下为true，2D视图下无效。（自V1.4.0开始支持）
            viewMode: '3D', //开启3D视图,默认为关闭
            buildingAnimation: true, //楼块出现是否带动画
            expandZoomRange: true, //是否支持可以扩展最大缩放级别,和zooms属性配合使用，设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
            zooms: [3, 20], //地图显示的缩放级别范围，在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
            pitch: pitch, //俯仰角度，默认0，[0,83]，2D地图下无效 。（自V1.4.0开始支持）
            rotation: rotation, //地图顺时针旋转角度，取值范围 [0-360]，默认值：0
            zoom: zoomNumber, //地图显示的缩放级别，若center与level未赋值，地图初始化默认显示用户所在城市范围，3D地图下，zoom值，可以设置为浮点数。
            center: centerPoint //地图中心点
        });

        map.addControl(new AMap.ControlBar({
            showZoomBar: false,
            showControlButton: true,
            position: {
                right: '10px',
                top: '10px'
            }
        }));

        var A = new AMap.Marker({
            animation: "AMAP_ANIMATION_DROP",
            position: [120.58328, 31.2980],
            title: "点击查看更多",
            map: map
        });
        var B = new AMap.Marker({
            animation: "AMAP_ANIMATION_DROP",
            position: [120.58395, 31.29755],
            title: "点击查看更多",
            map: map
        });
        var C = new AMap.Marker({
            animation: "AMAP_ANIMATION_DROP",
            position: [120.5836, 31.2973],
            title: "点击查看更多",
            map: map
        });

        A.on('click', function () {
            alert(1);
        });

        B.on('click', function () {
            alert(2);
        });

        C.on('click', function () {
            alert(3);
        });

    };

    function backToCenter() { //复位地图
        map.setPitch(pitch);
        map.setRotation(rotation);
        map.setZoomAndCenter(zoomNumber, centerPoint);
    }
</script>
</body>
</html>